@extends('admin.layout.layout', ['row' => @$page])

@section('title', @$page['title'])

@section('contain')
    <link rel="stylesheet" href="/dist/admin/stat.css">
    <div class="container" style="background-color: #f7f9fa;padding-bottom: 20px; padding-top: 20px;max-width: 1300px;">
        <a href="/admin/stat_compare/brand_total">
        <div class="widget-container">
            <div class="widget-content-container widget-content-container-title" style="">
                <h6 class="card-title">{{ ts('今年|累计车辆品牌') }}</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">{{ ts('JN') }}</p>
                <p><span style="font-size: 2rem;">{{ $brand_total_stat }}</span>&nbsp;&nbsp;{{ ts('GE') }}</p>
                <p class="show-percent">{{ ts('TB') }} <span style="color:#95F204">{{ $brand_total_rate }}%</span> {{ ts('HB') }} <span style="color:#95F204">{{ $brand_total_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <a href="/admin/stat_compare/most_brand">
        <div class="widget-container">
            <div class="widget-content-container widget-content-container-title" style="">
                <h6 class="card-title">{{ ts('今年|累计最多品牌') }}</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">{{ ts('JN') }}</p>
                <p><span style="font-size: 2rem;">{{ $brand_stat }}</span>&nbsp;&nbsp;{{ ts('GE') }}</p>
                <p class="show-percent">{{ ts('TB') }} <span style="color:#95F204">{{ $brand_rate }}%</span>{{ ts('HB') }} <span style="color:#95F204">{{ $brand_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <a href="/admin/stat_compare/most_model">
        <div class="widget-container">
            <div class="widget-content-container widget-content-container-title" style="">
                <h6 class="card-title">{{ ts('今年|累计最多型号') }}</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">{{ ts('JN') }}</p>
                <p><span style="font-size: 2rem;">{{ $model_stat }}</span>&nbsp;&nbsp;{{ ts('GE') }}</p>
                <p class="show-percent">{{ ts('TB') }} <span style="color:#95F204">{{ $model_rate }}%</span> {{ ts('HB') }} <span style="color:#95F204">{{ $model_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <div class="widget-container" style="display: none;">
            <div class="widget-content-container widget-content-container-title" style="">
            </div>
        </div>
        <br clear="all" />
        <div style="width: 50%;float: left; padding: 5px 10px;">
            <div style="float: left; width: 20%;">
                <button type="button" class="btn btn-secondary" id="all_country">{{ ts('全国') }}</button>
            </div>
            <div style="float: left; width: 40%;">
                <div class="input-group mb-3 custom-control-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text">{{ ts('DISTRIBUTORNAME') }}</span>
                    </div>
                    <select class="form-control" style="width: 60%" id="distributions">
                        <option selected disabled value="">{{ ts('XZSD') }}</option>
                        @if (!empty($distributions))
                            @foreach($distributions as $distribution)
                                <option value="{{ $distribution->id }}">{{ $distribution->abbr }}</option>
                            @endforeach
                        @endif
                </select>
                </div>
            </div>
            <div style="float: left; width: 40%;">
                <div class="input-group mb-3 custom-control-inline">
                    <div class="input-group-prepend" style="width: 30%;">
                        <span class="input-group-text">{{ ts('DEALERS')  }}</span>
                    </div>
                    <select class="form-control" style="width: 70%" id="dealers">
                        <option selected disabled value="">{{ ts('XZJXS') }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div style="width: 50%; float: left; padding: 5px 10px;">
            <div style="float: left; width: 50%;">
                <div class="input-group mb-3 custom-control-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text">{{ ts('品牌') }}</span>
                    </div>
                    <select class="form-control" style="width: 70%" id="car_brand">
                        <option selected disabled value="">{{ ts('选择品牌') }}</option>
                        @if (!empty($brands))
                            @foreach($brands as $brand)
                                <option value="{{ $brand->car_brand }}">{{ $brand->car_brand }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>
        <br clear="all" />
        <div class="row" style="padding-top:10px;padding-left: 10px;">
            <div class="col-md-2">
            <div class="input-group mb-3 custom-control-inline">
                <div class="input-group-prepend">
                    <span class="input-group-text">{{ ts('YEAR') }}</span>
                </div>
                <select class="form-control" style="width: 50%;" id="year">
                    @for ($i = date('Y'); $i >= 2016; $i--)
                        <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>
            </div>
            </div>
            <div class="col-md-2">
            <div class="input-group mb-3 custom-control-inline">
                <div class="input-group-prepend">
                    <span class="input-group-text">{{ ts('月份') }}</span>
                </div>
                <select class="form-control" style="width: 50%;" id="month">
                    <option value="">{{ ts('月份总计') }}</option>
                    <option value="01">1</option>
                    <option value="02">2</option>
                    <option value="03">3</option>
                    <option value="04">4</option>
                    <option value="05">5</option>
                    <option value="06">6</option>
                    <option value="07">7</option>
                    <option value="08">8</option>
                    <option value="09">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            </div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">{{ ts('车辆品牌排名') }}</div>
                    <div class="col" style="text-align: right;">
                        <a href="/admin/stat_compare/compare_brand">
                            <span style="cursor: pointer">{{ ts('對比') }}</span>
                        </a>
                    </div>
                </div>
                <div class="show_line_area" id="brand_rank"></div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">{{ ts('车辆型号分布') }}</div>
                </div>
                <div class="show_line_area" id="model_rank"></div>
            </div>
        </div>
        <br clear="all" />
    </div>
@endsection
@section('script')
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script type="text/javascript">
    $(function () {
        showBrand();
        $("#year").on('change', function () {
            showBrand();
        });
        $("#month").on("change", function () {
            showBrand();
        });
        $("#car_brand").select2();
        $("#distributions").select2();
        $("#dealers").select2();

        $("#distributions").on("change", function () {
            if ($("#distributions").val() == '' || typeof $("#distributions").val() == 'undefined') {
                return;
            }

            $("#all_country").removeClass('btn-secondary').addClass('btn-primary');

            request.post('/admin/ajax/getDealers', {
                creator_id: $("#distributions").val(),
                t: 1,
            }).then(function (d) {
                console.log(d);
                let data = d.data;
                $("#dealers").empty().append('<option selected disabled value="">选择经销商</option>');
                if (data != '' && data.length > 0) {
                    for (let i in data) {
                        $("#dealers").append('<option value="' + data[i]['value'] + '">'+ data[i]['label'] +'</option>');
                    }
                }
            });
            showBrand();
        });

        $("#dealers").on('change', function () {
            $("#all_country").removeClass('btn-secondary').addClass('btn-primary');
            showBrand();
        });

        $("#all_country").on('click', function () {
            $("#distributions").val('').trigger('change');
            $("#dealers").val('').empty().append('<option selected disabled value="">选择经销商</option>');
            $("#all_country").removeClass('btn-primary').addClass('btn-secondary');
            showBrand();
        });

        $("#car_brand").on("change", function () {
            showModel();
        });
    });

    function showBrand() {
        $.ajax({
            url: '/admin/stat/brand_rank',
            type:'get',
            data: {year: $("#year").val(),
                month: $("#month").val(),
                dist_id: $("#distributions").val(),
                dealer_id: $("#dealers").val(),
            },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                let result = [];
                if (typeof data.list == 'undefined' || data.list.length <= 0) {
                }
                if (typeof data.list != 'undefined' && data.list.length > 0) {
                    for (let i in data.list) {
                        result.push([data.list[i]['car_brand'], parseInt(data.list[i]['brand_count'])]);
                    }
                }
                var chart = Highcharts.chart('brand_rank', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '',
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            rotation: -45  // 设置轴标签旋转角度
                        },
                    },
                    yAxis: {
                        min: 0,
                        title: '',
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                    },
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            events: {
                                click: function (e) {
                                    console.log(e.point.name);
                                    if (e.point.name != '' && typeof e.point.name != 'undefined') {
                                        $("#car_brand").val(e.point.name).trigger('change');
                                    }
                                }
                            },
                        }
                    },
                    series: [{
                        name: '品牌数量',
                        data: result,
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            format: '{point.y}', // :.1f 为保留 1 位小数
                            y: 10
                        }
                    }]
                });
            }
        });

    }

    function showModel() {
        $.ajax({
            url: '/admin/stat/brand_model',
            type:'get',
            data: {year: $("#year").val(),
                month: $("#month").val(),
                dist_id: $("#distributions").val(),
                dealer_id: $("#dealers").val(),
                car_brand: $("#car_brand").val(),
            },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                let result = [];
                if (typeof data.list == 'undefined' || data.list.length <= 0) {
                }
                if (typeof data.list != 'undefined' && data.list.length > 0) {
                    for (let i in data.list) {
                        result.push({name: data.list[i].car_model, y: data.list[i].model_count});
                    }
                }
                Highcharts.chart('model_rank', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y}个 {point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.y}个 {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            },
                        }
                    },
                    series: [{
                        name: 'Brands',
                        colorByPoint: true,
                        data: result
                    }]
                });
            }
        });

    }
</script>
@endsection
